<template>
  <div class="app-container home">
    <!-- 顶部横幅 -->
    <div class="top-banner">
      <div class="banner-content">
        <h1>应急资源管理系统</h1>
        <p>高效统筹 · 快速响应 · 科学调度</p>
      </div>
    </div>

    <!-- 图片轮播 -->
    <div class="carousel-container">
      <el-carousel height="400px" indicator-position="outside" autoplay>
        <el-carousel-item v-for="(item, index) in carouselImages" :key="index">
          <img :src="item" class="carousel-img" alt="应急物资场景图" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 系统核心功能区 -->
    <div class="system-features">
      <h2 class="section-title">系统核心功能</h2>
      <el-row :gutter="30" class="feature-row">
        <el-col :sm="24" :md="8" class="feature-card">
          <div class="feature-icon">
            <i class="el-icon-box"></i>
          </div>
          <h3>物资库存管理</h3>
          <p>实时监控各类应急物资库存状态，支持多仓库数据联动，确保储备充足。</p>
        </el-col>
        <el-col :sm="24" :md="8" class="feature-card">
          <div class="feature-icon">
            <i class="el-icon-truck"></i>
          </div>
          <h3>调度审批流程</h3>
          <p>规范化物资申请与审批流程，支持多级审核，实时追踪调度进度，确保应急物资快速精准送达。</p>
        </el-col>
        <el-col :sm="24" :md="8" class="feature-card">
          <div class="feature-icon">
            <i class="el-icon-pie-chart"></i>
          </div>
          <h3>数据统计分析</h3>
          <p>可视化展示装备储备、队伍信息等关键数据，支持多维度对比分析，为应急决策提供科学依据。</p>
        </el-col>
      </el-row>
    </div>

    <!-- 应急资源概览 -->
    <div class="resource-overview">
      <h2 class="section-title">应急资源概览</h2>
      <el-row :gutter="20" class="stats-row">
        <el-col :sm="24" :md="6" class="stat-card">
          <div class="stat-content">
            <p class="stat-label">物资种类</p>
            <p class="stat-value">246</p>
            <p class="stat-desc">涵盖防护、救援、通讯等8大类</p>
          </div>
        </el-col>
        <el-col :sm="24" :md="6" class="stat-card">
          <div class="stat-content">
            <p class="stat-label">总储备量</p>
            <p class="stat-value">12,843</p>
            <p class="stat-desc">单位：件/套</p>
          </div>
        </el-col>
        <el-col :sm="24" :md="6" class="stat-card">
          <div class="stat-content">
            <p class="stat-label">仓库数量</p>
            <p class="stat-value">18</p>
            <p class="stat-desc">覆盖全市12个区县</p>
          </div>
        </el-col>
        <el-col :sm="24" :md="6" class="stat-card">
          <div class="stat-content">
            <p class="stat-label">本月调度次数</p>
            <p class="stat-value">37</p>
            <p class="stat-desc">平均响应时间：42分钟</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 应急调度流程 -->
    <div class="dispatch-process">
      <h2 class="section-title">应急调度流程</h2>
      <div class="process-steps">
        <div class="step-item">
          <div class="step-number">1</div>
          <div class="step-content">
            <h3>需求申报</h3>
            <p>各单位通过系统提交物资需求，明确种类、数量及紧急程度</p>
          </div>
        </div>
        <div class="step-divider">→</div>
        <div class="step-item">
          <div class="step-number">2</div>
          <div class="step-content">
            <h3>多级审批</h3>
            <p>根据需求紧急程度启动对应审批流程，支持线上签章确认</p>
          </div>
        </div>
        <div class="step-divider">→</div>
        <div class="step-item">
          <div class="step-number">3</div>
          <div class="step-content">
            <h3>库存匹配</h3>
            <p>系统自动匹配最优仓库库存，生成调度方案</p>
          </div>
        </div>
        <div class="step-divider">→</div>
        <div class="step-item">
          <div class="step-number">4</div>
          <div class="step-content">
            <h3>物资配送</h3>
            <p>联动物流系统生成配送单，实时追踪运输轨迹</p>
          </div>
        </div>
        <div class="step-divider">→</div>
        <div class="step-item">
          <div class="step-number">5</div>
          <div class="step-content">
            <h3>签收确认</h3>
            <p>接收单位签收后系统自动更新库存，完成闭环管理</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统公告 -->
    <div class="system-notice">
      <h2 class="section-title">最新公告</h2>
      <el-card>
        <el-timeline>
          <el-timeline-item
            v-for="(notice, index) in notices"
            :key="index"
            :timestamp="notice.time"
          >
            <el-card>
              <h4>{{ notice.title }}</h4>
              <p>{{ notice.content }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>

    <!-- 页脚 -->
    <footer class="system-footer">
      <p>© 2025 应急物资管理系统 版权所有 | 应急管理局 技术支持</p>
      <p>应急值班电话：400-123-4567 | 技术支持：010-87654321</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: "EmergencyHome",
  data() {
    return {
      // 轮播图图片（实际项目中替换为真实应急场景图片）
      carouselImages: [
        require("@/assets/images/emergency1.png"), // 应急仓库全景
        require("@/assets/images/emergency2.png"), // 物资装车调度
        require("@/assets/images/emergency3.jpg"), // 防汛物资储备
        require("@/assets/images/emergency4.jpg")  // 应急物资发放
      ],
      // 系统公告
      notices: [
        {
          time: "2025-07-10",
          title: "关于开展第三季度物资盘点的通知",
          content: "请各仓库管理员于7月20日前完成本季度物资盘点，重点核查防汛、防疫类物资有效期"
        },
        {
          time: "2025-07-05",
          title: "新增3个临时应急物资储备点",
          content: "新增城东、河西、南郊3个临时储备点，现已完成物资入库，可支持周边区域30分钟内应急响应"
        },
        {
          time: "2025-06-28",
          title: "系统升级通知",
          content: "7月5日23:00-次日2:00将进行系统升级，期间暂停服务，升级后新增移动端审批功能"
        }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
// 基础样式
.home {
  font-family: "Microsoft YaHei", sans-serif;
  color: #333;
  background-color: #f5f7fa;
}

// 顶部横幅
.top-banner {
  background-color: #931313;
  color: white;
  padding: 30px 0;
  text-align: center;
  .banner-content {
    max-width: 1200px;
    margin: 0 auto;
    h1 {
      font-size: 36px;
      margin-bottom: 15px;
      font-weight: 600;
    }
    p {
      font-size: 18px;
      opacity: 0.9;
    }
  }
}

// 轮播图
.carousel-container {
  margin: 20px auto;
  max-width: 600px;
  .carousel-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 4px;
  }
}

// 通用标题样式
.section-title {
  text-align: center;
  margin: 40px 0 30px;
  font-size: 28px;
  color: #973728;
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background-color: #b13535;
    margin: 10px auto;
  }
}

// 核心功能区
.system-features {
  max-width: 1200px;
  margin: 0 auto;
  .feature-row {
    margin-bottom: 30px;
  }
  .feature-card {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    &:hover {
      transform: translateY(-5px);
    }
    .feature-icon {
      font-size: 36px;
      color: #b3461e;
      margin-bottom: 15px;
    }
    h3 {
      font-size: 18px;
      margin-bottom: 10px;
      color: #333;
    }
    p {
      color: #666;
      line-height: 1.6;
    }
  }
}

// 资源概览
.resource-overview {
  background-color: #f9fafc;
  padding: 30px 0;
  margin: 30px 0;
  .stats-row {
    max-width: 1200px;
    margin: 0 auto;
  }
  .stat-card {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    .stat-label {
      color: #666;
      font-size: 16px;
      margin-bottom: 10px;
    }
    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #b3321e;
      margin-bottom: 5px;
    }
    .stat-desc {
      color: #999;
      font-size: 14px;
    }
  }
}

// 调度流程
.dispatch-process {
  max-width: 1200px;
  margin: 0 auto 40px;
  .process-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }
  .step-item {
    flex: 1;
    min-width: 150px;
    text-align: center;
    .step-number {
      width: 36px;
      height: 36px;
      background-color: #b33e1e;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 10px;
      font-weight: bold;
    }
    h3 {
      font-size: 16px;
      margin-bottom: 5px;
    }
    p {
      font-size: 14px;
      color: #666;
    }
  }
  .step-divider {
    color: #ccc;
    font-size: 20px;
    padding: 0 10px;
  }
}

// 系统公告
.system-notice {
  max-width: 1200px;
  margin: 0 auto 40px;
  .el-timeline {
    padding-left: 20px;
  }
  .el-timeline-item {
    margin-bottom: 20px;
  }
  .el-timeline-item__timestamp {
    color: #666;
    font-size: 14px;
  }
}

// 页脚
.system-footer {
  background-color: #b31e1e;
  color: white;
  text-align: center;
  padding: 25px 0;
  margin-top: 50px;
  p {
    margin: 5px 0;
    font-size: 14px;
    opacity: 0.9;
  }
}
</style>